/*
*作者---杨彬
*
*/
<template>
  <div>
    <header>
      <img src="./../../assets/index/logo.png" class="com-div-middle-ab program-left">
      <input class="com-div-center-center-ab" placeholder="请输入商品名称" v-model="productName">
      <img src="./../../assets/index/searcher.png" class="com-div-middle-ab program-right"
           @click="getSearch(productName)"
      >
    </header>
    <section v-if="isSearch" style='min-height:12rem;'>
      <div class="index-product-list category" v-for="(pitem,pindex) in searchData">
        <div class="div-list">
          <div class="com-font0 list-header"><img :src="pitem.categoryImg"></div>
          <div class="list-content">
            <div class="list-item" v-for="(oitem,oindex) in pitem.products" @click="goProducDetailFn(oitem)">
              <div class="item-picture">
                <img :src="oitem.img">
              </div>
              <p class="en-name" v-text="oitem.englishName"></p>
              <p class="cn-name" v-text="oitem.name"></p>
              <p class="price-size" v-text="oitem.price+'元/'+oitem.size+oitem.productUnit"></p>
            </div>
            <div class="com-clear-float"></div>
          </div>
        </div>
      </div>
    </section>
    <section v-if="!isSearch">
      <div class="index-banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="bannerImg in this.bannerurl">
              <img :src="bannerImg.thumbnail" @click = 'bannerGO(bannerImg)'>
            </div>
          </div>
          <!-- 分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="hot-product">
        <img :src="leftUrl.thumbnail" @click = 'bannerGO(leftUrl)'>
        <img :src="rightUrl.thumbnail" @click = 'bannerGO(rightUrl)'>
      </div>
      <div class="index-product-list" v-for="(pitem,pindex) in getData">
        <div class="div-list">
          <div class="com-font0 list-header"><img :src="pitem.categoryImg"></div>
          <div class="list-content">
            <div class="list-item" v-for="(oitem,oindex) in pitem.products" @click="goProducDetailFn(oitem)">
              <div class="item-picture">
                <img :src="oitem.img">
              </div>
              <p class="en-name" v-text="oitem.englishName"></p>
              <p class="cn-name" v-text="oitem.name"></p>
              <p class="price-size" v-text="oitem.price+'元/'+oitem.size+oitem.productUnit"></p>
            </div>
            <div class="com-clear-float"></div>
          </div>
        </div>
      </div>
    </section>
    <cake-foot :sData="sData" v-if='isShowFoot'></cake-foot>
    <!-- 弹框 -->
      <div class='pop' v-if="isGetCoupon">
        <div>
          <img src="../../assets/coupon/newCoupon.png">
          <p class='tit'>有新优惠券可领啦</p>
          <p class='describ'>时间有限,快来领取哦</p>
          <p class='btn'>
            <span class='cancel' @click="cancel">暂不领取</span>
            <span class='submit' @click='goGet'>立即领取</span>
          </p>
        </div>
      </div>
  </div>
</template>

<script type="text/javascript">
  import cakeFoot from "src/components/com/footer/footer.vue"
  require('./../../../static/swiper-3.3.1.min.css')
  export default {
    data(){
      return {
        getData: "",
        productName: "",
        bannerUrl: [],
        bannerurl: [],
        leftUrl: '',
        rightUrl: '',
        isSearch: false,
        searchData:'',
        isShowFoot:true,
        isGetCoupon:false
      }
    },
    props: ['sData'],
    components: {cakeFoot},
    mounted () {
    },
    methods: {
      cancel () {
        this.isGetCoupon = false;
      },
      goGet () {
        m$.template({
          val: ''
        })
        this.getAjax(this.sData.url.getCoupon, {},
        (res) => {
          
          if (res && res.status==200) {
            m$.template({
              val: '领取成功',
              time:1000
            })
            window.location.href = '#/coupon/false/0'
          }
        })
      },
      bannerGO (val) {
        if(val.orders==1){//外联路径
          window.location.href = val.linkurl;
        }else if(val.orders==2){//商品详情
          let id = val.linkurl.split('productId=')[1];
          this.$router.push({
            name: 'productDetail',
            params: {productId: id}
          })
        }else if(val.orders==3){//分类
          this.isShowFoot = false;
          this.isSearch = true;
          //跳转分类
          this.$router.push({
            name: 'search',
            params: {GoCategory: val}
          })
          // this.getAjax(val.linkurl,'',
          // (res) => {
          //   if(res.data&&res.data.length>=1){
          //     this.searchData = res.data;
          //   }else{
          //     m$.template({
          //        val: '很抱歉,后台数据出错了',
          //        time: 1500
          //      })
          //   }
          // })
        } 
      },
      getSearch (oname){
        if(oname)
        //跳转搜索界面
        this.$router.push({
          name: 'search',
          params: {searchName: oname}
        })
        // this.isSearch = true;
        // this.getAjax(this.sData.url.index, {productName: (oname ? oname : '')},
        // (res) => {
        //   if(res.data&&res.data.length>=1){
        //     this.searchData = res.data;
        //   }else{
        //     m$.template({
        //        val: '很抱歉,没有符合条件的商品',
        //        time: 1500
        //      })
        //   }
          
        // })
      },
      getIndex(oname){
        this.getAjax(this.sData.url.index, {productName: (oname ? oname : '')},
          (res) => {
            this.getData = res.data;
          })
      },
      goProducDetailFn(oitem){
        this.$router.push({
          name: 'productDetail',
          params: {productId: oitem.id}
        })
      },
      getBanner () {
        this.getAjax(this.sData.url.banner, {},
          (res) => {
            if (res.data && res.data.length > 0) {
              this.bannerUrl = res.data;
              this.bannerUrl.forEach((item) => {
                if (item.site === "up") {
                  this.bannerurl.push(item)
                } else if (item.site === "left") {
                  this.leftUrl = item
                } else if (item.site === "right") {
                  this.rightUrl = item
                }
              })
              if(this.bannerurl.length >1){
                setTimeout(function(){
                  var mySwiper1 = new Swiper('.index-banner .swiper-container', {
                    direction: 'horizontal',
                    autoplay: 2000,
                    //effect : 'coverflow',
                    speed: 500,
                    pagination: '.swiper-pagination',
                    paginationClickable:true,
                    autoplayDisableOnInteraction : false,//每次手滑动后自动播放
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    loop: true
                  });
                },10);
              }
               
            }
          })
      },
      getCoupon (){
        this.getAjax(this.sData.url.getNewCoupon, {},
          (res) => {
            if(res&&res.status==200){
              //用户id获取
              m$.localStrages.set('userId',res.data.userId);
              this.sData.userId=res.data.userId;
              //模拟用户id,改bug用,后期删掉
              //m$.localStrages.set('userId',2678);
              //this.sData.userId=2678;
              //弹出新优惠券弹框
              if (res.data.hasActivityCoupon == 1) {
                this.isGetCoupon = true;
              }
            }
            
          })
      }
    },
    created(){
      // document.title = this.sData.indexStaticsData.title;
      m$.documentTitle(this.sData.indexStaticsData.title);
      this.getIndex("");
      this.getBanner();
      this.getCoupon();
    }
  }

</script>
<style scoped lang="less">
  @import "index.less";
</style>
